<template>
  <div>
    <Card dis-hover style="margin-top: 20px">
      <Row type="flex" justify="end">
        <!--
				<Button class="margin20" type="primary" icon="ios-log-out">导出模板</Button>
				<Button class="margin20" type="primary" icon="ios-log-in">导入数据</Button>
				-->
        <Button class="margin20" type="primary" :loading="submitLoading" @click="subAdd">提交</Button>
      </Row>
      <Row class="cardRow format_table_wrap">
        <Table
          border
          style="overflow: visible; margin-top: 20px"
          ref="selection"
          :columns="columns2"
          :data="gong.data1"
        >
          <template slot-scope="{ row, index }" slot="marketAttrs">
            <Select
              transfer
              v-model="row.promotionAttr"
              @on-change="changeSelect(row, index)"
              style="width: 100px"
            >
              <Option
                v-for="item in marketAttrsList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </Option>
            </Select>
          </template>
          <template slot-scope="{ row, index }" slot="applicableCustomerTypeList">
            <Select
              v-if="row.promotionAttr == '1'"
              transfer
              multiple
              v-model="row.applicableCustomerTypeList"
              @on-change="handleCustomerTypeChange(row, index)"
            >
              <Option
                v-for="item in customerTypeList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </Option>
            </Select>
          </template>
          <template slot-scope="{ row, index }" slot="mainPlatform">
            <RadioGroup
              v-if="row.promotionAttr == '1'"
              v-model="row.mainPlatform"
              @on-change="changeGroup(row, index)"
            >
              <Radio
                v-for="item in mainPlatformList"
                :label="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </Radio>
            </RadioGroup>
          </template>
          <template slot-scope="{ index }" slot="createOpeTime">
            <DatePicker
              type="date"
              transfer
              format="yyyy-MM-dd"
              @on-change="changeStatTime($event, index)"
              placeholder="请选择起始时间"
            ></DatePicker>
          </template>
          <template slot-scope="{ row, index }" slot="endTime">
            <DatePicker
              transfer
              :value="row.endTime"
              v-if="row.promotionAttr == '2'"
              type="date"
              format="yyyy-MM-dd"
              @on-change="changeEndTime($event, index)"
              placeholder="请选择截止时间"
            >
            </DatePicker>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              v-if="row.promotionAttr == '1'"
              type="primary"
              @click="guanlianAddress(row, index)"
              >关联地区</Button
            >
          </template>
        </Table>
      </Row>
    </Card>
    <!-- 关联地区 弹窗 -->
    <Modal
      v-model="modal1"
      title="关联地区"
      @on-ok="saveRelateArea()"
    >
      <Tree
        ref="cityTree"
        :data="treeCityData"
        show-checkbox
        multiple
        @on-check-change="checkCityChange"
      />
    </Modal>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { newCityTreeDataUtils } from '@/assets/js/commonUtils';
import tableForm from '@/components/common/baseForm'; // 表单组件
import tableList from './comps/baseTable'; // 表格组件
import asyncLoadComp from '@/components/common/asyncLoadComp'; // 动态导入组件
import { mapMutations, mapState } from 'vuex';

export default {
  components: {
    tableForm,
    tableList,
    asyncLoadComp
  },
  data () {
    return {
      submitLoading: false,
      modal1: false,
      selectIndex: 0, // 选中的当前的条目
      gong: {
        title: '商品营销属性',
        Inputvalue: '',
        Selectvalue: '',
        Selectvalue1: '',
        Radiovalue: '商品营销属性新增',
        data1: []
      },
      version: 0,
      uuids: '',
      areaUuid: '',
      uuid: '',
      treeCityData: [],
      treeCityDataInit: [],
      customerTypeList: [],
      marketAttrsList: [
        {
          value: '1',
          label: '主推'
        },
        {
          value: '2',
          label: '新上'
        },
        {
          value: '3',
          label: '积压促销'
        }
      ],
      mainPlatformList: [
        {
          value: '1',
          label: '全部'
        },
        {
          value: '2',
          label: '云采'
        },
        {
          value: '3',
          label: '线上'
        }
      ],
      columns2: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '分类',
          key: 'categoryPath',
          align: 'center',
          minWidth: 160,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
          align: 'center',
          minWidth: 100
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          align: 'center',
          minWidth: 100
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center',
          minWidth: 150,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '品牌',
          key: 'brandName',
          align: 'center',
          minWidth: 100,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '营销属性',
          key: 'promotionAttrStr',
          align: 'center',
          minWidth: 100
        },
        {
          title: '主推平台',
          slot: 'mainPlatform',
          align: 'center',
          minWidth: 250
        },
        {
          title: '适用客户类型',
          slot: 'applicableCustomerTypeList',
          align: 'center',
          minWidth: 200
        },
        {
          title: '截止时间',
          slot: 'endTime',
          align: 'center',
          minWidth: 180
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 120,
          align: 'center',
          fixed: 'right'
        }
      ]
    };
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'formItemData',
      'formItemDataRules'
    ])
  },
  created () {
    this.uuids = this.$route.query.uuids;
    this.version = this.$route.query.version;
    this.initData();
    // 查一次城市树
    this.initCityList();
    this.initCustomerTypeList();
  },
  mounted () {},
  methods: {
    ...mapMutations('admin/baseList', [
      'setListData',
      'setFormItemData',
      'setFormItemDataRules'
    ]),
    initData () {
      let myUuid = this.uuids.split(',');
      let data = {};
      ApiRequest(
        '/sysback/manage/productmanagerattrskurel/getListByUuids?uuids=' +
          myUuid,
        'post',
        data
      ).then((res) => {
        if (res.retStatus == '1') {
          this.gong.data1 = res.retData;
        }
      });
    },
    // 获取地区成功
    initCityList () {
      let data = {};
      // 开始请求列表
      ApiRequest(
        '/sysback/addsingleproduct/basicinfo/getCityTree',
        'post',
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1') {
          this.treeCityDataInit = res.retData;
        }
      });
    },
    // 获取客户类型
    initCustomerTypeList () {
      let data = {};
      // 开始请求列表
      ApiRequest(
        '/sysback/apiItemRest/getApplicableCustomerTypeMap',
        'post',
        data,
      ).then((res) => {
        if (res.retStatus === '1') {
          const { retData } = res;
          this.customerTypeList = []
          Object.keys(retData).forEach((item) => {
            this.customerTypeList.push({
              label: retData[item],
              value: item
            })
          })
        }
      });
    },
    // 提交
    subAdd () {
      this.submitLoading = true;
      ApiRequest(
        '/sysback/manage/productmanagerattrskurel/batchUpdateAttrSkuRel',
        'post',
        this.gong.data1
      ).then((res) => {
        this.submitLoading = false;
        if (res.retStatus == '1') {
          this.$Message.success('保存成功');
          this.$router.go(-1);
        }
      });
    },
    // 适用客户类型选择
    handleCustomerTypeChange (newval, index) {
      this.gong.data1[index].applicableCustomerTypeList = newval.applicableCustomerTypeList;
    },
    changeSelect (newval, index) {
      this.gong.data1[index].promotionAttr = newval.promotionAttr;
    },
    changeGroup (newval, index) {
      this.gong.data1[index].mainPlatform = newval.mainPlatform;
    },
    changeStatTime (val, index) {
      this.gong.data1[index].createOpeTime = val;
    },
    changeEndTime (val, index) {
      this.gong.data1[index].endTime = val;
    },
    guanlianAddress (row, index) {
      this.uuid = row.uuid;
      this.selectIndex = index;
      this.getCityList(row);
    },
    // 获取地区成功
    getCityList (row) {
      let arr = [];
      if (
        row.areaUuid !== null &&
        row.areaUuid !== '' &&
        row.areaUuid !== 'ALL'
      ) {
        arr = row.areaUuid.split(',');
      }
      // 克隆一份数据
      let nowData = JSON.parse(JSON.stringify(this.treeCityDataInit));
      // 勾选
      // this.treeCityData = newCityTreeDataUtils(nowData, arr);
      this.treeCityData = [
        {
          title: '全选',
          expand: true,
          children: newCityTreeDataUtils(nowData, arr)
        }
      ];
      // 展示
      this.modal1 = true;
    },

    // 保存关联地区
    saveRelateArea () {
      let data = {
        uuid: this.uuid,
        areaUuid: this.areaUuid
      };
      ApiRequest(
        '/sysback/manage/productmanagerattrskurel/saveRelateArea?uuid=' +
          this.uuid +
          '&areaUuid=' +
          this.areaUuid,
        'post',
        data
      ).then((res) => {
        if (res.retStatus == '1') {
          this.$Message.success('关联成功');
        }
        this.modal1 = false;

        // 更新行的areaUuid
        this.gong.data1[this.selectIndex].areaUuid = this.areaUuid;
      });
    },
    // 城市选择
    checkCityChange () {
      let sdata = this.$refs.cityTree.getCheckedNodes();
      let cityList = []; // 清空以前的勾选
      sdata.forEach((element) => {
        if (element.children === undefined) {
          cityList.push(element.code);
        }
      });
      this.areaUuid = cityList.join(',');
    }
  }
};
</script>
<style lang="less" scoped="scoped">
.margin20 {
  margin-right: 20px;
}
</style>
